<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle, {width: '100%'})"
  >
    <div
      :class="['vc-' + currNode.type,]"
      :style="visual.parseStyle(currNode.currCompStyle)"
    >
      <Component
        v-if="compName"
        :is="compName"
        :node="currNode"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue';
import { useVisualCompStore } from '@/visual/js/visual-comp';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object
});
const initializing = ref(true);
const currNode = ref(props.node);
const visualComp = useVisualCompStore();

const comp = ref();
const compName = ref('');

const init = async(styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);

  if (currNode.value.type) {
    comp.value = await visualComp.getVisualComp(currNode.value.type);
    compName.value = comp.value.name;
  }

  await nextTick(() => initializing.value = false);
};

const getData = () => {
  return { inputParam: currNode.value.inputParam || {} };
};

const changeStyle = (styleId) => {
  init(styleId);
};

const loadData = async() => {};

const refresh = async() => {
  initializing.value = true;
  await nextTick(() => initializing.value = false);
};

onMounted(async() => {
  await init();
});

defineExpose({ getData, changeStyle, refresh, loadData });
</script>